div
<template>
	<div class="app-container">
		<SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
			<el-col :span="6">
				<el-form-item label="文件名" prop="fileName">
					<el-input
						v-model="queryParams.fileName"
						placeholder="请输入文件名"
						clearable
						size="small"
						@keyup.enter.native="handleQuery" />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="原名" prop="originalName">
					<el-input
						v-model="queryParams.originalName"
						placeholder="请输入原名"
						clearable
						size="small"
						@keyup.enter.native="handleQuery" />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="文件后缀" prop="fileSuffix">
					<el-input
						v-model="queryParams.fileSuffix"
						placeholder="请输入文件后缀"
						clearable
						size="small"
						@keyup.enter.native="handleQuery" />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="创建时间">
					<el-date-picker
						v-model="daterangeCreateTime"
						size="small"
						style="width: 240px"
						value-format="yyyy-MM-dd HH:mm:ss"
						type="daterange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:default-time="['00:00:00', '23:59:59']"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="上传人" prop="createBy">
					<el-input
						v-model="queryParams.createBy"
						placeholder="请输入上传人"
						clearable
						size="small"
						@keyup.enter.native="handleQuery" />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="服务商" prop="service">
					<el-input
						v-model="queryParams.service"
						placeholder="请输入服务商"
						clearable
						size="small"
						@keyup.enter.native="handleQuery" />
				</el-form-item>
			</el-col>
		</SearchContent>

		<div class="card-wrap paddingAll20" :model="queryParams" ref="queryForm" label-width="86px">
			<div class="table-title-wrap justify-end">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleFile"
					v-hasPermi="['system:oss:upload']">
					上传文件
				</el-button>

				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleImage"
					v-hasPermi="['system:oss:upload']">
					上传图片
				</el-button>

				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['system:oss:remove']">
					删除
				</el-button>

				<el-button
					:type="previewListResource ? 'danger' : 'warning'"
					plain
					size="mini"
					@click="handlePreviewListResource(!previewListResource)"
					v-hasPermi="['system:oss:edit']">
					预览开关 : {{ previewListResource ? '禁用' : '启用' }}
				</el-button>

				<el-button
					type="info"
					plain
					icon="el-icon-s-operation"
					size="mini"
					@click="handleOssConfig"
					v-hasPermi="['system:oss:list']">
					配置管理
				</el-button>

				<!--                  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
			</div>
			<el-table
				v-loading="loading"
				:data="ossList"
				@selection-change="handleSelectionChange"
				:header-cell-class-name="handleHeaderClass"
				@header-click="handleHeaderCLick"
				v-if="showTable">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="对象存储主键" align="center" prop="ossId" v-if="false" />
				<el-table-column label="文件名" align="center" prop="fileName" />
				<el-table-column label="原名" align="center" prop="originalName" />
				<el-table-column label="文件后缀" align="center" prop="fileSuffix" />
				<el-table-column label="文件展示" align="center" prop="url">
					<template slot-scope="scope">
						<ImagePreview
							v-if="previewListResource && checkFileSuffix(scope.row.fileSuffix)"
							:width="100"
							:height="100"
							:src="scope.row.url"
							:preview-src-list="[scope.row.url]" />
						<span
							v-text="scope.row.url"
							v-if="!checkFileSuffix(scope.row.fileSuffix) || !previewListResource" />
					</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					align="center"
					prop="createTime"
					width="180"
					sortable="custom">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="上传人" align="center" prop="createBy" />
				<el-table-column label="服务商" align="center" prop="service" sortable="custom" />
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="text"
							icon="el-icon-edit"
							@click="handleDownload(scope.row)"
							v-hasPermi="['system:oss:download']">
							下载
						</el-button>
						<el-button
							size="mini"
							type="text"
							icon="el-icon-delete"
							@click="handleDelete(scope.row)"
							v-hasPermi="['system:oss:remove']">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<pagination
				v-show="total > 0"
				:total="total"
				:page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize"
				@pagination="getList" />
		</div>

		<!-- 添加或修改OSS对象存储对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="文件名">
					<fileUpload :fileType="false" v-model="form.file" v-if="type === 0" />
					<imageUpload v-model="form.file" v-if="type === 1" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button :loading="buttonLoading" type="primary" @click="submitForm">
					确 定
				</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { listOss, delOss } from '@/api/system/oss';
	import SearchContent from '@/components/SearchContent/index.vue';

	export default {
		name: 'Oss',
		components: { SearchContent },
		data() {
			return {
				showTable: true,
				// 按钮loading
				buttonLoading: false,
				// 遮罩层
				loading: true,
				// 导出遮罩层
				exportLoading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// OSS对象存储表格数据
				ossList: [],
				// 弹出层标题
				title: '',
				// 弹出层标题
				type: 0,
				// 是否显示弹出层
				open: false,
				// 预览列表图片
				previewListResource: true,
				// 创建时间时间范围
				daterangeCreateTime: [],
				// 默认排序
				defaultSort: { prop: 'createTime', order: 'ascending' },
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					fileName: undefined,
					originalName: undefined,
					fileSuffix: undefined,
					url: undefined,
					createTime: undefined,
					createBy: undefined,
					service: undefined,
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					file: [{ required: true, message: '文件不能为空', trigger: 'blur' }],
				},
			};
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询OSS对象存储列表 */
			getList() {
				this.loading = true;
				this.queryParams.params = {};
				if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
					this.queryParams.params['beginCreateTime'] = this.daterangeCreateTime[0];
					this.queryParams.params['endCreateTime'] = this.daterangeCreateTime[1];
				}
				this.getConfigKey('sys.oss.previewListResource').then(response => {
					this.previewListResource =
						response.msg === undefined ? true : response.msg === 'true';
				});
				listOss(this.queryParams).then(response => {
					this.ossList = response.rows;
					this.total = response.total;
					this.loading = false;
					this.showTable = true;
				});
			},
			checkFileSuffix(fileSuffix) {
				let arr = ['png', 'jpg', 'jpeg'];
				return arr.some(type => {
					return fileSuffix.indexOf(type) > -1;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					file: undefined,
				};
				this.resetForm('form');
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.showTable = false;
				this.daterangeCreateTime = [];
				this.resetForm('queryForm');
				this.queryParams.orderByColumn = this.defaultSort.prop;
				this.queryParams.isAsc = this.defaultSort.order;
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.ossId);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			// 设置列的排序为我们自定义的排序
			handleHeaderClass({ column }) {
				column.order = column.multiOrder;
			},
			// 点击表头进行排序
			handleHeaderCLick(column) {
				if (column.sortable !== 'custom') {
					return;
				}
				switch (column.multiOrder) {
					case 'descending':
						column.multiOrder = 'ascending';
						break;
					case 'ascending':
						column.multiOrder = '';
						break;
					default:
						column.multiOrder = 'descending';
						break;
				}
				this.handleOrderChange(column.property, column.multiOrder);
			},
			handleOrderChange(prop, order) {
				let orderByArr = this.queryParams.orderByColumn
					? this.queryParams.orderByColumn.split(',')
					: [];
				let isAscArr = this.queryParams.isAsc ? this.queryParams.isAsc.split(',') : [];
				let propIndex = orderByArr.indexOf(prop);
				if (propIndex !== -1) {
					if (order) {
						//排序里已存在 只修改排序
						isAscArr[propIndex] = order;
					} else {
						//如果order为null 则删除排序字段和属性
						isAscArr.splice(propIndex, 1); //删除排序
						orderByArr.splice(propIndex, 1); //删除属性
					}
				} else {
					//排序里不存在则新增排序
					orderByArr.push(prop);
					isAscArr.push(order);
				}
				//合并排序
				this.queryParams.orderByColumn = orderByArr.join(',');
				this.queryParams.isAsc = isAscArr.join(',');
				this.getList();
			},
			/** 任务日志列表查询 */
			handleOssConfig() {
				this.$router.push({ path: '/system/oss-config/index' });
			},
			/** 文件按钮操作 */
			handleFile() {
				this.reset();
				this.open = true;
				this.title = '上传文件';
				this.type = 0;
			},
			/** 图片按钮操作 */
			handleImage() {
				this.reset();
				this.open = true;
				this.title = '上传图片';
				this.type = 1;
			},
			/** 提交按钮 */
			submitForm() {
				this.open = false;
				this.getList();
			},
			/** 下载按钮操作 */
			handleDownload(row) {
				this.$download.oss(row.ossId);
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ossIds = row.ossId || this.ids;
				this.$modal
					.confirm('是否确认删除OSS对象存储编号为"' + ossIds + '"的数据项?')
					.then(() => {
						this.loading = true;
						return delOss(ossIds);
					})
					.then(() => {
						this.loading = false;
						this.getList();
						this.$modal.msgSuccess('删除成功');
					})
					.finally(() => {
						this.loading = false;
					});
			},
			// 预览列表图片状态修改
			handlePreviewListResource(previewListResource) {
				let text = previewListResource ? '启用' : '停用';
				this.$modal
					.confirm('确认要"' + text + '""预览列表图片"配置吗?')
					.then(() => {
						return this.updateConfigByKey(
							'sys.oss.previewListResource',
							previewListResource,
						);
					})
					.then(() => {
						this.getList();
						this.$modal.msgSuccess(text + '成功');
					})
					.catch(() => {});
			},
		},
	};
</script>
